<template>
    <!--大导航栏-->
    <span style="margin-bottom: 100px">
        <router-link to="/play">
            <div class="play">
                PLAY
            </div>
        </router-link>

        <router-link to="/home" active-class="bigNav-active">
            <div class="bigNav" style="border-left: 0;">
                <img class="arrow" src="../assets/Iamges/arrow.png"
                    style="position: absolute; transform: translate(9px, -31px);"
                >
                <b>主页</b>
            </div>
        </router-link>

        <div class="bigNav" style="width: 138px;">
            <b>云顶之弈</b>
        </div>

        <div class="bigNav" style="width: 138px; margin-right: 90px; border-right: 0;">
            <b>冠军杯赛</b>
        </div>

        <div class="bigNav" style="font-size: 17px; width: 85px; border-left: 0;" >
            <a>通行证</a>
        </div>

        <div class="bigNav" style="font-size: 17px;width: 85px;">
            生涯
        </div>

        <router-link to="/heros" active-class="bigNav-active">
            <img class="arrow" src="../assets/Iamges/arrow.png"
                style="position: absolute; transform: translate(28px, -2px);"
            >
            <div class="bigNav" style="font-size: 17px;width: 85px;">
                藏品
            </div>
        </router-link>

        <div class="bigNav" style="font-size: 17px;width: 85px;">
            战利品
        </div>

        <div class="bigNav" style="font-size: 17px;width: 85px;">
            商城
        </div>
    </span>
</template>

<script>
export default {
    name: 'ClientBigNav',
}
</script>

<style scoped>
    .bigNav{
        font-size: 25px;
        color: rgb(199, 188, 139);
        border-left: 2px solid white;
        border-right: 2px solid white;

        border-image: linear-gradient( rgba(199, 188, 139, 0),rgba(199, 188, 139, 0),rgba(199, 188, 139, 0),rgba(199, 188, 139, 0.8), rgba(199, 188, 139, 0),rgba(199, 188, 139, 0),rgba(199, 188, 139, 0)) 20 20;


        margin-right: -2px;
        padding-top: 30px;

        height: 70%;
        width: 85px;

        text-align: center;
        display: inline-block;
    }

    .bigNav:hover{
        background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.08),rgba(255, 251, 197, 0.15));
        color: rgb(255, 250, 226);
    }

    .bigNav-active div{
        background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05),rgba(255, 255, 255, 0.1),rgba(255, 251, 197, 0.25));
        color: rgb(255, 250, 226);
    }

    .arrow{
        opacity: 0;
    }

    .bigNav-active .arrow{
        opacity: 1;
    }

    .play{
        color:antiquewhite;
        font-size: 20px; 
        cursor: pointer; 


        height: 35%;
        width: 120px;
        display: inline-block;
        text-align: center;
        justify-content: center;

        background-color: rgba(0, 46, 28, 0.5);
        border: 2px solid rgb(4, 175, 167);
        border-image: linear-gradient(rgb(4, 175, 167), rgb(0, 57, 104)) 20 20;

        margin-bottom: 25px;
        margin-left: 50px; 
        margin-right: 90px;
        padding-top: 5px;
    }

    .play:hover{
        border-image: linear-gradient(rgb(35, 255, 244),rgb(0, 99, 180)) 20 20;
    }
</style>